<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2024-01-18 09:54:17
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2024-02-29 10:27:43
 * @FilePath: \vue-admin-template\src\views\dashboard\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="normal-container">
    <div class="normal-text">{{ $route.name }}</div>
    <div style="padding: 20px;background-color: #fff;border-radius: 5px;">
      <div style="display: flex;flex-wrap:wrap;justify-content: flex-start; gap: 10px;">
        <div
          style="width: 19%;min-width: 220px;display: flex;padding: 20px;border-radius: 5px;align-items: center;cursor: pointer;"
          :style="{ 'background-color': '#F2FAFF' }" @click="jumpUrl('设备台账')">
          <div style="width: 30%;">
            <img style="width: 100%;height: auto;" src="@/assets/icon/首页icon-设备台账.png" alt="">
          </div>
          <div style="margin-left: 20px;">
            <div style="font-size: 32px;color: #334973;font-weight: 600;letter-spacing: 1px;">
              {{ list.device }}
            </div>
            <div style="font-size: 14px;color: #3C517A;margin-top: 5px;">
              设备台账
            </div>
          </div>
        </div>
        <div
          style="width: 19%;min-width: 220px;display: flex;padding: 20px;border-radius: 5px;align-items: center;cursor: pointer;"
          :style="{ 'background-color': '#FAF9FF' }" @click="jumpUrl('模具台账')">
          <div style="width: 30%;">
            <img style="width: 100%;height: auto;" src="@/assets/icon/首页icon-模具台账.png" alt="">
          </div>
          <div style="margin-left: 20px;">
            <div style="font-size: 32px;color: #334973;font-weight: 600;letter-spacing: 1px;">
              {{ list.mold }}
            </div>
            <div style="font-size: 14px;color: #3C517A;margin-top: 5px;">
              模具台账
            </div>
          </div>
        </div>
        <div
          style="width: 19%;min-width: 220px;display: flex;padding: 20px;border-radius: 5px;align-items: center;cursor: pointer;"
          :style="{ 'background-color': '#F0FAF4' }" @click="jumpUrl('工装台账')">
          <div style="width: 30%;">
            <img style="width: 100%;height: auto;" src="@/assets/icon/首页icon-工装台账.png" alt="">
          </div>
          <div style="margin-left: 20px;">
            <div style="font-size: 32px;color: #334973;font-weight: 600;letter-spacing: 1px;">
              {{ list.frock }}
            </div>
            <div style="font-size: 14px;color: #3C517A;margin-top: 5px;">
              工装台账
            </div>
          </div>
        </div>
        <div style="width: 19%;min-width: 220px;display: flex;padding: 20px;border-radius: 5px;align-items: center;"
          :style="{ 'background-color': '#FFF7F4' }">
          <div style="width: 30%;">
            <img style="width: 100%;height: auto;" src="@/assets/icon/首页icon-保养报警.png" alt="">
          </div>
          <div style="margin-left: 20px;">
            <div style="display: flex;cursor: pointer;" @click="jumpUrl('设备保养报警')">
              <div style="font-size: 14px;color: #3C517A;margin-right: 5px;">
                设备保养报警
              </div>
              <div style="font-size: 14px;color: #3C517A;">
                {{ list.seDevice }}
              </div>
            </div>
            <div style="display: flex;cursor: pointer;" @click="jumpUrl('模具保养报警')">
              <div style="font-size: 14px;color: #3C517A;margin-right: 5px;">
                模具保养报警
              </div>
              <div style="font-size: 14px;color: #3C517A;">
                {{ list.seMold }}
              </div>
            </div>
            <div style="display: flex;cursor: pointer;" @click="jumpUrl('工装保养报警')">
              <div style="font-size: 14px;color: #3C517A;margin-right: 5px;">
                工装保养报警
              </div>
              <div style="font-size: 14px;color: #3C517A;">
                {{ list.seFrock }}
              </div>
            </div>
          </div>
        </div>
        <div
          style="width: 19%;min-width: 220px;display: flex;padding: 20px;border-radius: 5px;align-items: center;cursor: pointer;"
          :style="{ 'background-color': '#F2FDFD' }" @click="jumpUrl('钳口报警')">
          <div style="width: 30%;">
            <img style="width: 100%;height: auto;" src="@/assets/icon/首页icon-钳口报警.png" alt="">
          </div>
          <div style="margin-left: 20px;">
            <div style="font-size: 32px;color: #334973;font-weight: 600;letter-spacing: 1px;">
              {{ list.jaw }}
            </div>
            <div style="font-size: 14px;color: #3C517A;margin-top: 5px;">
              钳口报警
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 40px;">
        <div class="title-box-name" style="margin-bottom:20px;">维修统计</div>
        <div id="echartsId" style="width:100%;height:calc(100vh - 400px)"></div>
      </div>
    </div>
    <!-- <div id="echartsId" style="width:100%;height: 330px;"></div> -->
  </div>
</template>

<script>
var echarts = require('echarts');
export default {
  data() {
    return {
      myChart: null,
      option: null,
      value3: '',
      numList: [],
      colorList: ["#65ACD6", "#6565D6", "#6489D6", "#28BDC5", "#8A65D6", "#65D6AC", "#65D685", "#556B2F", "#20B2AA", "#4682B4", "#483D8B", "#8A2BE2", "#FFB6C1", "#FFE4E1", "#2F4F4F", "#D2B48C", "#DAA520", "#800000", "#BC8F8F"],
      list: {},
      seriesList: [],
      timeList: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
    }
  },
  mounted() {
    this.getCount();
    this.getValue();

  },
  methods: {
    getValue() {
      this.$baseRequestGet('/home/columnChart', {}, 'get').then(res => {
        this.seriesList = res.data;
        let month = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        this.seriesList.forEach((item, index) => {
          item.type = 'bar'
          item.color = this.colorList[index];
        })
        for (let index = 0; index < this.timeList.length; index++) {
          this.seriesList.forEach((item, i) => {
            let numtotal = month[index] + item.data[index]
            month[index] = numtotal
          })
        }
        this.seriesList.push({
          name: '维修总数',
          type: 'line',
          color: ['#EFA90D'],  //折线条的颜色
          smooth: true,
          yAxisIndex: 1,
          itemStyle: {
            hadowBlur: 2,
          },
          data: month
        })
        this.getEchart();
      })
    },
    jumpUrl(name) {
      switch (name) {
        case '设备台账':
          this.$router.push({ path: '/ledgerManagement/equipmentLedger' });
          break;
        case '模具台账':
          this.$router.push({ path: '/ledgerManagement/moldLedger' });
          break;
        case '工装台账':
          this.$router.push({ path: '/ledgerManagement/fixtureLedger' });
          break;
        case '设备保养报警':
          this.$router.push({ path: '/maintain/equipmentMaintain' });
          break;
        case '模具保养报警':
          this.$router.push({ path: '/maintain/moldMaintain' });
          break;
        case '工装保养报警':
          this.$router.push({ path: '/maintain/fixtureMaintain' });
          break;
        case '钳口报警':
          this.$router.push({ path: '/jawReplacement/jawReplacement' });
          break;

        default:
          break;
      }
    },
    getCount() {
      this.$baseRequestGet('/home/count', {}, 'get').then(res => {
        this.list = res.data;
      })
    },


    getEchart(list) {
      this.myChart = echarts.init(document.getElementById('echartsId'));
      let zoomShow = false;
      if (this.seriesList.length > 6) {
        zoomShow = true;
      } else {
        zoomShow = false;
      }
      this.option = {

        tooltip: {
          trigger: 'axis',
          // formatter(params) {
          //   let names = '';
          //   if (params[params.length - 1].value == 0) {
          //     return;
          //   } else {
          //     for (let index = 0; index < params.length; index++) {
          //       names = names + `${params[index].seriesName}: ${params[index].value}  </br> `
          //     }
          //     return names;
          //   }

          // },
        },
        legend: {
          x: 'center', // 图例水平居中
          y: 'bottom',
          //         type: 'scroll',
          // show: true,
          data: this.seriesList.map((item, index) => {
            return item.name
          })
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: this.timeList
          }
        ],
        yAxis: [
          {
            type: 'value'
          },
          {
            type: 'value',
            nameTextStyle: {
              color: '#999999',
            },
            splitLine: { show: false },//去除网格线
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              margin: 2,
              interval: 10,
              color: '#999999',
            }
          }
        ],
        dataZoom: [//滚动条
          {
            // 设置滚动条的隐藏与显示
            show: true,
            // 设置滚动条类型
            type: "slider",
            // 设置背景颜色
            backgroundColor: "rgb(19, 63, 100)",
            // 设置选中范围的填充颜色
            fillerColor: "rgb(16, 171, 198)",
            // 设置边框颜色
            borderColor: "rgb(19, 63, 100)",
            // 是否显示detail，即拖拽时候显示详细数值信息
            showDetail: false,
            // 数据窗口范围的起始数值
            startValue: 0,
            // 数据窗口范围的结束数值（一页显示多少条数据）
            endValue: 5,
            // empty：当前数据窗口外的数据，被设置为空。
            // 即不会影响其他轴的数据范围
            filterMode: "empty",
            // 设置滚动条宽度，相对于盒子宽度
            width: "90%",
            // 设置滚动条高度
            height: 8,
            // 设置滚动条显示位置
            left: "center",
            // 是否锁定选择区域（或叫做数据窗口）的大小
            zoomLoxk: true,
            // 控制手柄的尺寸
            handleSize: 0,
            // dataZoom-slider组件离容器下侧的距离
            bottom: -5,
          },
          {
            // 没有下面这块的话，只能拖动滚动条，
            // 鼠标滚轮在区域内不能控制外部滚动条
            type: "inside",
            // 滚轮是否触发缩放
            zoomOnMouseWheel: false,
            // 鼠标滚轮触发滚动
            moveOnMouseMove: true,
            moveOnMouseWheel: true,
          },
        ],

        series: this.seriesList
        //你的代码
      }
      this.option && this.myChart.setOption(this.option, true);
      window.addEventListener("resize", this.freshEchats);
    },
    freshEchats() {
      this.myChart.resize();
    },



  }
}
</script>

<style lang="scss" scoped>
.content-num {


  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;

  div {
    flex: 1;
    position: relative;
    min-width: 180px;
    max-width: 370px;

    img {
      width: 100%;

      height: auto;
    }

    .text-box {
      position: absolute;
      top: 50%;
      left: 15%;
      transform: translate(-10%, -50%);
    }

    .position-text {
      position: absolute;
      top: 15px;
      left: 15px;

    }
  }

}

.echarts-box {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-top: 30px;
}

.title-box-name {
  position: relative;
  margin-left: 10px;
  font-size: 18px;
}

.title-box-name::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 0px;
  width: 4px;
  height: 19px;
  border-radius: 2px;
  background-color: #5CD8DA;

}
</style>
